import React, { Component } from 'react'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

export default class App extends Component {

    //初始化状态
    state = {
        todos : [
            {id: 1, name:'吃饭', done:true},
            {id: 2, name:'睡觉', done:true},
            {id: 3, name:'打代码', done:false},
            {id: 4, name:'逛街', done:true}
        ]
    }

    addTodo = (name) => {
        //获取原来todos
        const {todos} = this.state;
        //追加一个todo
        const todoObj = {id: todos.length+1, name: name, done: false};
        const newTodos = [todoObj, ...todos];
        //更新状态
        this.setState({
            todos : newTodos
        })
    }

    updateTodo = (id, done) => {
        //获取状态中的todos
        const {todos} = this.state;
        //匹配处理数据
        const newTodos = todos.map((todo) => {
            if(todo.id === id) {
                return {...todo, done}
            } else {
                return todo;
            }
        })
        //返回状态数据
        this.setState({
            todos: newTodos
        })
    }

    //删除一个todo
    deleteTodo = (id) => {
        //获取原来的todos
        const {todos} = this.state;
        //删除指定id的todo对象
        const newTodos = todos.filter((todoObj) => {
            return todoObj.id !== id
        })
        //返回状态数据
        this.setState({
            todos: newTodos
        })
    }

    //全选todos
    checkAllTodo = (done) =>{
        //获取原来的todos
        const {todos} = this.state;
        //加工数据
        const newTodos = todos.map((todoObj)=>{
            return {...todoObj, done}
        })
        //返回状态数据
        this.setState({
            todos: newTodos
        })
    }

    //清除所有已完成的
    clearAllDone = () => {
        //获取原来的todos
        const {todos} = this.state;
        //过滤数据
        const newTodos = todos.filter((todoObj)=>{
            return todoObj.done === false
        })
        //返回状态数据
        this.setState({
            todos: newTodos
        })
    }

    render() {
        return (
            <div>
                <div className="todo-container">
                    <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <List todos={this.state.todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
                    <Footer todos={this.state.todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
                    </div>
                </div>
            </div>
        )
    }
}
